:root {
    --shadow-10: 0 1px 4px rgba(12, 12, 13, 0.1);
    --shadow-20: 0 2px 8px rgba(12, 12, 13, 0.1);
    --shadow-30: 0 4px 16px rgba(12, 12, 13, 0.1);

    --focus-border-color: var(--blue-50);

    --box-background: var(--white-100);
    --box-color: var(--grey-90);

    --focus-box-shadow: 0 0 0 1px var(--focus-border-color);

    --button-background: var(--grey-90-a10);
    --button-background-hover: var(--grey-90-a20);
    --button-background-active: var(--grey-90-a30);
    --button-background-primary: var(--blue-60);
    --button-background-primary-hover: var(--blue-70);
    --button-background-primary-active: var(--blue-80);
    --button-color: var(--grey-90);
    --button-color-primary: var(--white-100);

    --field-background: var(--box-background);
    --field-color: var(--box-color);
    --field-placeholder-color: var(--grey-50);
    --field-border-color: var(--grey-90-a20);
    --field-border-color-hover: var(--grey-90-a30);

    --field-box-shadow-warning: 0 0 0 1px var(--yellow-60),
        0 0 0 4px var(--yellow-60-a30);
    --field-box-shadow-error: 0 0 0 1px var(--red-60),
        0 0 0 4px var(--red-60-a30);

    --border-color: var(--grey-90-a20);
    --secondary-color: rgb(125, 125, 125);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --box-background: rgb(35, 34, 43);
        --box-color: var(--white-100);

        --button-background: rgb(71, 70, 79);
        --button-background-hover: rgb(80, 79, 88);
        --button-background-active: rgb(92, 91, 100);
        --button-color: var(--white-100);

        --field-placeholder-color: var(--grey-30);
        --field-border-color: var(--grey-10-a20);
        --field-border-color-hover: var(--grey-10-a30);

        --border-color: var(--grey-10-a20);
        --secondary-color: var(--grey-10-a60);
    }
}

* {
    box-sizing: border-box;
}

button,
input,
textarea,
select {
    border: 1px solid transparent;
    border-radius: 2px;
}

button,
select {
    background-color: var(--button-background);
    color: var(--button-color);
}
button:not(:disabled):hover {
    background-color: var(--button-background-hover);
}
button:not(:disabled):active {
    background-color: var(--button-background-active);
}

input,
textarea,
select {
    background-color: var(--field-background);
    border: 1px solid var(--field-border-color);
    color: var(--field-color);
}

input:hover,
textarea:hover,
select:hover {
    border-color: var(--field-border-color-hover);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    border-color: var(--focus-border-color) !important;
    box-shadow: var(--focus-box-shadow);
    outline: initial;
}

button::-moz-focus-inner,
input::-moz-focus-inner,
textarea::-moz-focus-inner,
select::-moz-focus-inner {
    border: initial;
}

input:invalid,
textarea:invalid {
    box-shadow: var(--field-box-shadow-error) !important;
    border-color: var(--red-60) !important;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    opacity: 0.35;
}

button,
input,
textarea,
select {
    padding: 4px 8px;
    font: inherit;
}

/* No inset for spinbox control */
input[type="number"] {
    padding-inline-end: 2px;
}

button:default {
    background-color: var(--button-background-primary);
    color: white !important;
}
button:default:hover {
    background-color: var(--button-background-primary-hover);
}
button:default:hover:active {
    background-color: var(--button-background-primary-active);
}

.ghost {
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    height: 24px !important;
    justify-content: center;
    padding: initial;
    width: 24px !important;
}

.ghost:not(:hover),
.ghost:disabled {
    background-color: initial;
}

.select-wrapper {
    --arrow-width: 16px;
    position: relative;
    display: inline-block;
}
.select-wrapper::after {
    align-items: center;
    background-image: url("assets/photon_arrowhead_down.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%;
    content: "";
    display: flex;
    height: 100%;
    justify-content: center;
    margin-right: 4px;
    opacity: 0.5;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: var(--arrow-width);
}
.select-wrapper--disabled::after {
    opacity: 0.25;
}
select {
    -moz-appearance: none;
    padding-right: calc(8px + var(--arrow-width));
}

option:disabled {
    opacity: 0.35;
}
